
<!-- 商城首页 -->
<template>
  <div class="mall-index">
    <van-nav-bar title="天气记录" @click-left="() => $router.go(-1)" safe-area-inset-top>
      safe-area-inset-top>
      <template #left>
        <img style="width: 25px" src="../../assets/images/back.png" alt="" />
      </template>
    </van-nav-bar>

    <div class="tq" v-for="item in list" :key="item.id">

      <div>

        <img src="../../assets/images/weathercn/7.png" v-if="item.condition == '小雨'"
          style="width:50px;height:50px;margin:5px" />
        <img src="../../assets/images/weathercn/0.png" v-else-if="item.condition == '晴天'"
          style="width:50px;height:50px;margin:5px" />
        <img src="../../assets/images/weathercn/0.png" v-else style="width:50px;height:50px;margin:5px" />

      </div>
      <div style="display: flex;flex-direction:column;width:100%">
        <div style="margin:5px;display: flex;flex-direction:row;justify-content: space-between">

          <span style="	width:30%;text-align: center;">{{ item.condition }}</span>

          <span style="	width:70%;text-align: right;padding-right: 10px;">
            {{ item.day }}
          </span>
        </div>
        <div style="display: flex;flex-direction:row;margin:5px;width:100%;justify-content: space-between">

          <div style="	width:30%;"> {{ item.temp }}℃</div>
          <div style="width:30%;	"> 风力:{{ item.windLevel }}级</div>
          <div style="width:30%;"> 湿度：{{ item.humidity }}%</div>

        </div>

      </div>

      <div>

      </div>
    </div>
  </div>
</template>

<script>
import { getTqList } from "../../api/index";
export default {
  name: "",
  data() {
    return {
      keys: "",
      list: [
        {}
      ],


    };
  },
  methods: {


    async getData() {
      var city = localStorage.getItem("city");

      let res = await getTqList({ city: city });
      if (res.status == 200) {
        this.list = res.data;
      }
    },

  },
  computed: {},
  watch: {},
  created() {

    this.getData();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
:deep(.van-grid-item__content) {
  border-radius: 25px;
  overflow: hidden;
  background: none;
}

:deep(.van-search__content) {
  background: rgba($color: #fff, $alpha: 0.5);
}

:deep(.van-grid-item__content--surround) {
  background-color: #fff;
}

.mall-index {
  width: 100%;

}

.tq {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
  background: #8accfc;
  color: #ffffff;
  font-size: 0.35rem;
}
</style>